<script setup lang="ts">
import { useNamespace, _bem } from 'vc/src/use/use-namespace';

const ns = useNamespace('button');

const {
  namespace,
  b,
  e,
  m,
  be,
  em,
  bm,
  bem,
  is,
  cssVar,
  cssVarName,
  cssVarBlock,
  cssVarBlockName
} = ns;
</script>

<template>
  <div>namespace: {{ namespace }}</div>
  
  <div>b(): {{ b() }}</div>
  <div>b('test'): {{ b('test') }}</div>
  
  <div class="text-red-700">以下函数必须参数必传，否则返回空字符串</div>
  <div>e('test'): {{ e('test') }}</div>
  <div>m('test'): {{ m('test') }}</div>
  <div>be('test'): {{ be('par', 'sub') }}</div>
  <div>em('test'): {{ em('par', 'sub') }}</div>
  <div>bm('test'): {{ bm('par', 'sub') }}</div>
  <div>bem('test'): {{ bem('par', 'sub', 'sun') }}</div>
  <div>is('show', false): {{ is('show', false) }}</div>
  <div>is('show', true): {{ is('show', true) }}</div>
  <div>is('show'): {{ is('show') }}</div>
  <div>
    cssVar({'border-style': 'solid','border-width': '10px',}):
    {{ cssVar({ 'border-style': 'solid', 'border-width': '10px' }) }}
  </div>
  <div>cssVarName('test')：{{ cssVarName('test') }}</div>
  <div>cssVarBlock({ 'border-style': 'solid', 'border-width': '10px' })：{{ cssVarBlock({ 'border-style': 'solid', 'border-width': '10px' }) }}</div>
  <div>cssVarBlockName('test')：{{ cssVarBlockName('test') }}</div>
</template>
